{% extends 'layout.html'%}
{% block content%}
    <div class="container">
        <div class="page-header">
            <h3>订水</h3>
        </div>
        <form id="forms"novalidate>
            {% csrf_token %}
            <table class="table table-borderd table-hover">
                <tr>
                    <th>纯净水的名称</th>
                    <th>单价</th>
                    <th>定水量</th>
                    <th>选择</th>
                </tr>
                {% for i in obj%} 
                <tr>
                    <td><input type="text"name={{i.pname}} value={{i.pname}} style="border:0px;"></td>
                    <td><input type="text"name={{i.pk}} value={{i.price}} style="border:0px;"></td>
                    <td><input type="text" name='num{{i.pk}}'></td>
                    <td ><input type="checkbox" class="test"name="test"style="border:0px;"></td>
                </tr>
                {% endfor %}
            </table>
           
            <!-- <input id ="btn1"type="submit"class="btn btn-info"value="确定"> -->
            <button id="btn1"type="button"class="btn btn-info">购买</button>

        </form>
        
        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="alert alert-info alert-dismissible fade in" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4>是否确定购买？</h4>
                    <p style="text-align:right">
                      <button  type="button" class="btn btn-danger btn-buy"><a href="{% url 'dingdan' %}">购买</a></button>
                      <button id="btnConfirm"type="button" class="btn btn-default"data-dismiss="modal">取 消</button>
                    </p>
                  </div>
                  
                </div>
              </div>
            </div>
       </div>
{% endblock%}
{% block js %}
<script>
    var currentId;
    $(function(){
        bindBtnEvent();
        bindBtn2Evnet();
        bindBtnBuyEvent();
    })
    function bindBtnEvent(){          
        $("#btn1").click(function(){
            var s='';
            var obj = document.getElementsByClassName('test');
           
            for (var i = 0; i < obj.length; i++) {
                if (obj[i].checked){
                    s=i+1
                    obj[i].value =i+1;
                   
                }
                else{
                    obj[i].value=0;
                }
            }
            if (s==''){
                alert('你还没有选择任何内容！');
            }
            $.ajax({
                url:'/reserve_result/',
                type:"get",
                data:$("#forms").serialize(),
                dataType:"JSON",
                success:function(res){
                    if (res.status){
                        
                        $('#deleteModal').modal('show');
                        // location.reload()
                    }
                    else{
                        alert('错误');
                    }
                }
            })
        })
    }
    function bindBtn2Evnet(){
        $("#btnConfirm").click(function(){

            $.ajax({
                url:'/order_detail/',
                type:'get',
                data:{
                    status:currentId,
                },
                dataType:"JSON",
            })
        })
    }
    function bindBtnBuyEvent(){
        $("#btn-buy").click(function(){

        })
    }
</script>
{% endblock%}